import {message, Modal} from 'antd';
import React, {useRef} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {isSuccess} from "@/utils/utils";
import {OpImMessageManager} from "@/services/api-functions";
import {SYS_ENUMS} from "@/utils/constants";
import ProTable, {ActionType, ProColumns} from "@ant-design/pro-table";
import {ExclamationCircleOutlined} from "@ant-design/icons";

export const handleMessageState = async (id: any, enabling: number) => {
  try {
    message.loading('正在操作');
    if (isSuccess((await OpImMessageManager.messageDisable({id, enabling}))?.code)) {
      message.success('操作成功');
      return true;
    }
    return false
  } catch (error) {
    return false;
  }
};


const ArticleList: React.FC<any> = ({}) => {
  const actionRef = useRef<ActionType>();
  const columns: ProColumns[] = [
    {
      title: '所属方',
      dataIndex: 'fromUserNickName',
      ellipsis: true,
      hideInTable: true,
    },
    {
      title: '联系方',
      dataIndex: 'toUserNickName',
      ellipsis: true,
      hideInTable: true,
    },
    {
      title: '所属方',
      dataIndex: ['belongUserDto', 'nickName'],
      ellipsis: true,
      width: 250,
      hideInSearch: true,
      fixed: 'left',
    },
    {
      title: '联系方',
      dataIndex: ['toUserDto', 'nickName'],
      ellipsis: true,
      hideInSearch: true,
      width: 120,
    },
    {
      title: '是否启用',
      dataIndex: 'enabling',
      valueEnum: SYS_ENUMS.BOOLEAN_ENUMS,
      width: 130,
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '消息类型',
      dataIndex: 'messageType',
      valueEnum: SYS_ENUMS.MESSAGE_TYPE,
      width: 130,
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '消息内容',
      dataIndex: 'message',
      ellipsis: true,
      hideInSearch: true,
      width: 100,
      render: (_, record) => record.messageType === SYS_ENUMS.MESSAGE_TYPE.CONTENT.value ? record.message :
        <a href={record?.file?.url} target='_blank' rel="noreferrer">下载</a>
    }, {
      title: '创建时间',
      dataIndex: 'gmtCreate',
      valueType: 'dateTime',
      width: 170,
      hideInSearch: true,
      hideInForm: true,
    },
    {
      title: '发起时间',
      dataIndex: 'gmtCreateTimeRange',
      valueType: 'dateTimeRange',
      width: 170,
      hideInTable: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      hideInSearch: true,
      hideInForm: true,
      fixed: 'right',
      render: (_, record) => [
        <a key="edit" onClick={() => Modal.confirm({
          title: '提示',
          icon: <ExclamationCircleOutlined/>,
          content: <span>确定要{record.enabling ? '禁用' : '启用'} 吗？</span>,
          okText: record.enabling ? '禁用' : '启用',
          cancelText: '取消',
          onOk: async () => {
            if (await handleMessageState(record?.id, record.enabling ? 0 : 1)) {
              actionRef.current?.reload()
            }
          },
        })}>{record.enabling ? '禁用' : '启用'}</a>
      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable<any, any>
        actionRef={actionRef}
        rowKey="key"
        search={{
          labelWidth: 120,
        }}
        request={async (params) => {
          const query = {...params}
          if (params.gmtCreateTimeRange) {
            query.startTime = params.gmtCreateTimeRange[0]
            query.endTime = params.gmtCreateTimeRange[1]
            delete query.gmtCreateTimeRange
          }
          const {data: {data, total}, code}: any = await OpImMessageManager.messageList(query);
          return {data: data || [], success: isSuccess(code), total: isSuccess(code) ? total : 0};
        }}
        columns={columns}
        scroll={{x: 1300}}
      />
    </PageContainer>
  );
};

export default ArticleList;
